<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body, div, h2, p {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #666666;
        }


        .box {
            /* 必须是绝对定位 */
            position: absolute;

            width: 300px;
            background: blue;
            cursor: move;
            border: 2px solid black;

            top: 50%;
            left: 50%;
        }

        .box h2 {
            color: white;
            font-size: 20px;
            line-height: 1em;
            background-color: #222;
            border-bottom: 2px solid #ccc;
            text-align: center;
            padding: 0 10px;
        }

        .box p {
            color: white;
        }

        #backtrack {
            border-top: 1px solid black;
            padding: 0 10px;
            vertical-align: bottom;
            text-align: right;
        }

        #backtrack a {
            text-decoration: none;
            color: white;
        }

        #backtrack a:hover {
            text-decoration: underline;
            color: black;
        }

        /* 不可点击 */
        .notClick{
            pointer-events: none;
        }
    </style>
</head>
<body>

<div class="box" id="eDrag">
    <h2>一个寂寞的拖拽框</h2>
    <p><strong>isDragged:</strong><span id="eIsDragged">false</span></p>
    <p><strong>offsetTop:</strong><span id="eOffsetTop">229</span></p>
    <p><strong>offsetLeft:</strong><span id="eOffsetLeft">385</span></p>
    <p id="backtrack">
        <a id="aPlayback" href="javascript:">点此回放拖动轨迹</a>
        <a id="aBacktrack" href="javascript:">点此倒放拖动轨迹</a>
    </p>
</div>

<script>
    source.ondragstart = function (event) {
        var e = event || window.event
        console.log('开始拖拽');
    }

    source.ondrag = function () {
        console.log('拖拽中');
    }

    source.ondragend = function () {
        console.log('拖拽结束')
    }
    target.ondragenter = function(){
        console.log('进入目标元素')
    }

    target.ondragover = function(event){
        var event = event || window.event;
        console.log('在目标元素中拖拽');
        event.preventDefault()
    }
    target.ondragleave = function(){
        console.log('拖放离开目标元素')
    }
    target.ondrop = function(event){
        console.log('拖放');
        var e = event || window.event;

    }
</script>
</body>
</html>